<template>
  <el-card>
    <!-- 顶部信息栏 -->
    <div class="init-1">
      <el-row :gutter="10">
        <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
          <div class="text t1">
            <span>神界人数</span>
            <p>1888</p>
          </div>
        </el-col>
        <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
          <div class="text t2">
            <span>今日出界</span>
            <p>1666</p>
          </div>
        </el-col>
        <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
          <div class="text t3">
            <span>今日入界</span>
            <p>68</p>
          </div>
        </el-col>
        <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
          <div class="text t4">
            <span>管理员</span>
            <p>12</p>
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- 顶部信息栏End -->

    <!-- 区域栏目 -->
    <div class="init-2">
      <el-row :gutter="10">
        <!-- 快捷方式 -->
        <el-col :xs="24" :sm="24" :md="16" :lg="16" :xl="16">
          <div class="tips">
            <h2>快捷方式</h2>
            <el-row :gutter="10">
              <el-col :xs="12" :sm="6" :md="6" :lg="6" :xl="6">
                <a>
                  <i class="el-icon-menu"></i>
                  <p>神仙管理</p>
                </a>
              </el-col>
              <el-col :xs="12" :sm="6" :md="6" :lg="6" :xl="6">
                <a>
                  <i class="el-icon-menu"></i>
                  <p>祈愿管理</p>
                </a>
              </el-col>
              <el-col :xs="12" :sm="6" :md="6" :lg="6" :xl="6">
                <a>
                  <i class="el-icon-menu"></i>
                  <p>货币管理</p>
                </a>
              </el-col>
              <el-col :xs="12" :sm="6" :md="6" :lg="6" :xl="6">
                <a>
                  <i class="el-icon-menu"></i>
                  <p>日志管理</p>
                </a>
              </el-col>
              <el-col :xs="12" :sm="6" :md="6" :lg="6" :xl="6">
                <a>
                  <i class="el-icon-menu"></i>
                  <p>事件管理</p>
                </a>
              </el-col>
              <el-col :xs="12" :sm="6" :md="6" :lg="6" :xl="6">
                <a>
                  <i class="el-icon-menu"></i>
                  <p>内容管理</p>
                </a>
              </el-col>
              <el-col :xs="12" :sm="6" :md="6" :lg="6" :xl="6">
                <a>
                  <i class="el-icon-menu"></i>
                  <p>高级选项</p>
                </a>
              </el-col>
              <el-col :xs="12" :sm="6" :md="6" :lg="6" :xl="6">
                <a>
                  <i class="el-icon-menu"></i>
                  <p>系统管理</p>
                </a>
              </el-col>
            </el-row>
          </div>
        </el-col>
        <!-- 快捷方式End -->
        <!-- 数据可视化区域 -->
        <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
          <div class="map">
            <!-- 这里是数据可视化区域 -->
          </div>
        </el-col>
        <!-- 数据可视化区域End -->
      </el-row>
    </div>
    <!-- 区域栏目End -->
  </el-card>
</template>

<script>
export default {}
</script>

<style lang="less" scoped>
.init-1 {
  .el-row {
    .el-col {
      padding: 10px;
    }
  }
  .text {
    text-align: center;
    color: #fff;
    background-color: #04f387;
    padding: 3vw 1vw;
    span {
      font-size: 16px;
    }
    p {
      font-size: 30px;
      font-weight: bold;
    }
    &.t2 {
      background-color: #2e48d8;
    }
    &.t3 {
      background-color: #f3bd28;
    }
    &.t4 {
      background-color: #f39800;
    }
  }
}

.init-2 {
  .tips {
    text-align: center;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    padding: 20px;
    margin-top: 20px;
    h2 {
      font-size: 24px;
      font-weight: 500;
      text-align: left;
      color: rgba(0, 0, 0, 0.6);
      border-bottom: 1px solid #eee;
      padding: 0 0 15px 15px;
      margin-bottom: 15px;
    }
    .el-row {
      .el-col {
        padding: 10px;
        a {
          display: inline-block;
          font-size: 1vw;
          padding-top: 2px;
          i {
            font-size: 40px;
            border-radius: 8px;
            background-color: #f5f5f5;
            padding: 1vw 2vw;
            transition: 0.3s;
          }
          p {
            background-color: #fff;
            padding-top: 6px;
          }
          &:hover i {
            background-color: #e9e9e9;
          }
        }
      }
    }
  }
}
</style>
